<!DOCTYPE html>
<html>
    <head>
        <title>Subservices</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
        <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
        <script type="text/javascript" src="../../script/jquery.min.js"></script>
        <script type="text/javascript" src="../../script/semantic/semantic.min.js"></script>
        <script type="text/javascript" src="../../script/applocale.js"></script>
        <!-- <script type="text/javascript" src="../../script/ao_module.js"></script> -->
    </head>
    <body>
        <br>
        <div class="ui container">
            <div class="ui container">
                <div class="ui header">
                    <i class="server icon"></i>
                    <div class="content">
                        <span locale="subservices/Title">Manage Subservice</span>
                        <div class="sub header"><span locale="subservices/Subtitle">Glue services together using subservices</span></div>
                    </div>
                </div>
                <div class="ui accordion">
                    <div class="title">
                        <i class="dropdown icon"></i>
                        <span locale="subservices/WhatIs">What is Subservice?</span>
                    </div>
                    <div class="content">
                        <p class="transition hidden"><span locale="subservices/Desc">Subservice is one type of ArOZ Online Module that is not build in to the system core but act like one. It is powered by reverse proxy build into the ArOZ Online Core so it can serve web content just like a build in module. Unlike the core modules that cannot be toggle off, you can switch subservices off to save power when needed.</span></p>
                    </div>
                </div>
            </div>
            <h4 locale="subservices/Running">Running Services</h4>
            <table class="ui celled striped table">
                <thead>
                    <tr>
                        <th locale="subservices/Module">Corresponding Module</th>
                        <th locale="subservices/Port">Port</th>
                        <th locale="subservices/ProxyPath">Reverse Proxy Path</th>
                        <th locale="subservices/Executable">Executable (Process ID)</th>
                        <th locale="subservices/Action">Action</th>
                    </tr>
                </thead>
                <tbody id="sslist">
                   
                </tbody>
            </table>
                        <h4 locale="subservices/Disabled">Disabled Services</h4>
                        <table class="ui celled table">
                                <thead>
                                    <tr>
                                        <th locale="subservices/ServiceName">Service Name</th>
                                        <th locale="subservices/Executable">Executable</th>
                                        <th locale="subservices/Action">Action</th>
                                    </tr>
                                </thead>
                                <tbody id="disServiceList">
               
                                </tbody>
        </div>
        <script>
            $('.ui.accordion').accordion();

            initSubserviceList();
            function initSubserviceList(){
                $("#sslist").html("");
                $("#disServiceList").html("");
                $.get("../../system/subservice/list",function(data){
                    if (data.error !== undefined){

                    }else{
                        for (var i = 0; i < data.Enabled.length; i++){
                            var ss = data.Enabled[i];
                            var port = ss.Port;
                            if (port == 0){
                                //This module is not using reverse proxy
                                port = "NO_PROXY";
                            }
                            var rpe = ss.RpEndpoint;
                            if (rpe == ""){
                                rpe = "N/A";
                            }else{
                                rpe = "/" + rpe;
                            }
                            $("#sslist").append(`<tr>
                            <td>
                                <h4 class="ui image header">
                                    <img src="../../${ss.Info.IconPath}" class="ui mini rounded image">
                                    <div class="content">
                                        ${ss.Info.Name}
                                        <div class="sub header"${ss.Info.Group}
                                    </div>
                                    </div>
                                </h4>
                            </td>
                            <td class="">${port}</td>
                            <td class="left aligned">${rpe}</td>
                            <td class="">${ss.Path} (${ss.ProcessID})</td>
                            <td class=""><button name="${ss.Info.Name}" sd="${ss.ServiceDir}" class="ui primary tiny button" onclick="kill(this);">DISABLE</button></td>
                            </tr>`);
                        }

                        for (var i = 0; i < data.Disabled.length; i++){
                            var thisDisabledService = data.Disabled[i];
                            $("#disServiceList").append(` <tr>
                                <td>${thisDisabledService.ServiceDir}</td>
                                <td>${thisDisabledService.Path}</td>
                                <td><button onclick="start(this);" dir="${thisDisabledService.ServiceDir}" class="ui positive tiny button"><span locale="subservices/Start">Start</span></button></td>
                            </tr>`);
                        }
                    }
                });
            }

            function kill(object){
                var name = $(object).attr("name");
                var sd = $(object).attr("sd");
                $.ajax({
                    url: "../../system/subservice/kill",
                    data: {serviceDir: sd, moduleName: name},
                    method: "POST",
                    success: function(data){
                        console.log(data);
                        //Update the launchMenu
                        parent.initModuleList();

                        //Update the list
                        initSubserviceList();
                    }
                });
            }

            function start(object){
                var dir = $(object).attr("dir");
                $.ajax({
                    url: "../../system/subservice/start",
                    data: {serviceDir: dir},
                    method: "POST",
                    success: function(data){
                        console.log(data);
                        //Update the launchMenu
                        parent.initModuleList();

                        //Update the list
                        setTimeout(function(){
                            //Allow 1 seconds to it to startup
                            initSubserviceList();
                        }, 1000);
                        
                    }
                });
            }

            $(document).ready(function(){
                if (applocale){
                    //Applocale found. Do localization
                    applocale.init("../locale/subservices_setting.json", function(){
                        applocale.translate();
                    });
                }else{
                    //App locale not found. Is this a trim down version of ArozOS?
                    applocale = {
                        getString: function(key, original){
                            return original;
                        }
                    }
                }
            });
        </script>
    </body>
</html>